<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景样式</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid #f00;
            /* 1 添加背景颜色 */
            /* background-color: skyblue; */
            /* 2 添加背景图片
                如果图片大于容器，那么默认就从容器的左上角开始放置
                如果图片小于容器，那么图片默认会平铺
            */
            /* background-image: url("../static/images/bg.jpg"); */
            background-image: url("../static/images/css3.png");
            /* 3 设置背景平铺
                repeat no-repeat repeat-x repeat-y
                css3 中新增 
                    round 将图片缩放之后再平铺
                    space 图片不会缩放平铺 会在图片之间产生相同的间距值
            */
            background-repeat: no-repeat;
            /* 4 设置在滚动容器的背景行为：跟随滚动/固定 
                fixed 背景固定
                scroll 当滚动容器的时候，背景图片也会跟随滚动
                local 和 scroll区别：前提是滚动当前容器的内容
                    local 背景图片会跟随内容一起滚动
                    scroll 背景图片不会根据内容滚动一起滚动
            */
            background-attachment: fixed;
            /* 5 background-size 
                语法：
                    background-size: auto(原始大小) || number(数值) || percentage(百分比) || cover(放大铺满)
                        || contain(缩小铺满)
                    参数说明
                        auto 此值为默认值，保持背景图片的原始高度和宽度
                        number 此值设置具体的值，可以改变背景图片的大小
                        percentage 此值为百分比，可以是 0% 到 100%之间任何值，但此值只能应用在块元素上，锁设置百分值
                            将使用背景图片大小根据所在元素宽度的百分比来计算
                        cover 此值是将图片放大，以适合铺满整个容器
                        contain 按照比例调整图片的大小，使图片的宽高自适应整个元素的背景区域
                            当图片大于容器 有可能造成容器的空白区域，将图片缩小
                            当图片小于容器 有可能造成容器的空白区域，将图片放大
                            cover 与 contain 正好相反，图片会按比例缩放，适应整个容器大小
            */
            background-size: auto;
            /* 6 设置图片位置, 背景偏移 */
            /* background-position: center; */
            /* 7 设置坐标的原点 
                border-box 从border的位置开始填充背景，会与border重叠
                padding-box 从padding的位置开始填充背景，会与padding重叠
                content-box 从内容的位置开始填充背景，会与内容重叠
            */
            background-origin: padding-box;
            /* 8 设置内容的裁切, 控制内容的显示
                border-box 显示border以及以内的内容
                padding-box 显示padding以及以内的内容
                content-box 显示内容以及以内的内容
            */
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>